<template>
  <div>
    <div class="avatar-wrap">
      <div class="avatar" v-html="avatar" :style="{ background: color }"></div>
    </div>
    <div class="profile">
      <div class="nickname" v-html="username"></div>
      <div class="latest_msg">
        UID:
        <span v-html="uid"></span>
      </div>
      <div class="latest_time">{{ late_msg_at }}</div>
    </div>
  </div>
</template>

<script setup>
import { simplifyDate } from "../../../utils/helper"
import multiavatar from "@multiavatar/multiavatar"

const props = defineProps({
  conversation: {
    type: Object,
    required: true,
  },
  keyword: {
    type: String,
  },
})

//关键字变色
const highlight = (value) => {
  if (value.indexOf(props.keyword) != -1) {
    return value.replace(props.keyword, `<font color='#409eff'>${props.keyword}</font>`);
  } else {
    return value
  }
}

const avatar = multiavatar(props.conversation.guest.uid, true)

const color = `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`

const username = highlight(props.conversation.guest.name)

const uid = highlight(props.conversation.guest.uid)

const late_msg_at = simplifyDate(props.conversation.late_msg_at)

</script>

<style scoped>
</style>